<template>
  <div id="body">
    <div class="landscape">
    </div>
    <div class="filter">
    </div>
    <div class="star">
      <canvas id="lockCanvas" ref="lockCanvas" width="400" height="320"></canvas>
    </div>
    <canvas id="canvas" ref="canvas"></canvas>
  </div>
</template>

<script>
export default {
  name: "StarMap",
  data() {
    return {}
  },
  mounted() {
    import('@/assets/js/lock.js');
    import('@/assets/js/start.js');
    document.getElementsByTagName("body")[0].style = "overflow: hidden; margin: 0";
    window.login = this.login
    var canvas = this.$refs.canvas;
    console.log(document.documentElement.clientHeight);
    console.log(document.body.clientHeight);
    /*let lock = document.createElement('script');//创建script标签
    lock.type = 'text/javascript';
    lock.src = require('../../assets/js/lock.js');  //静态资源
    document.body.append(lock)

    let start = document.createElement('script');//创建script标签
    start.type = 'text/javascript';
    start.src = require('../../assets/js/start.js');  //静态资源
    document.body.append(start)*/
  },
  methods: {
    login(pawArr){
      console.log(pawArr)
      if (pawArr.join("->") == "0->1->2->3->4->5->6->7->8") {
        window.location.href = "http://www.baidu.com";
      } else if (pawArr.length === 0) {
        let wPath = window.document.location.href;
        let pathName =  this.$route.path;
        let pos = wPath.indexOf(pathName);
        window.location.href = wPath.substring(0, pos) + "/static/home";
      } else {
        alert("密码结果是：" + pawArr.join("->"));
      }
    }
  }


}
</script>

<style scoped>
#body {
  margin: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  cursor: none;
  background: black;
  background: linear-gradient(to bottom, #000000 0%, #5788fe 100%);
  animation: fadeInAnimation ease 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.star {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;

}

.filter {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fe5757;
  animation: colorChange 30s ease-in-out infinite;
  animation-fill-mode: both;
  mix-blend-mode: overlay;
}

@keyframes colorChange {

  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: .9;
  }
}

.landscape {
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 100%;
  /*background-image:url(https://openclipart.org/image/2400px/svg_to_png/250847/Trees-Landscape-Silhouette.png);
*/
  background-image: url('~@/assets/beijing.png');
  background-size: 1000px;
  background-repeat: repeat-x;
  background-position: center bottom;
}

#can {
  border: 1px solid #ccc;
}
</style>